<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>

<section id="table">
    <table class="table">
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>职业</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>华晨宇</td>
            <td>男</td>
            <td>歌手</td>
        </tr>
        <tr>
            <td>赵丽颖</td>
            <td>女</td>
            <td>演员</td>
        </tr>
        <tr>
            <td>座山雕</td>
            <td>男</td>
            <td>土匪</td>
        </tr>
        <tr>
            <td>孙悟空</td>
            <td>公</td>
            <td>和尚</td>
        </tr>
        </tbody>
    </table>
</section>

<section id="table-striped">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>职业</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>华晨宇</td>
            <td>男</td>
            <td>歌手</td>
        </tr>
        <tr>
            <td>赵丽颖</td>
            <td>女</td>
            <td>演员</td>
        </tr>
        <tr>
            <td>座山雕</td>
            <td>男</td>
            <td>土匪</td>
        </tr>
        <tr>
            <td>孙悟空</td>
            <td>公</td>
            <td>和尚</td>
        </tr>
        </tbody>
    </table>
</section>

<section id="table-bordered">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>职业</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>华晨宇</td>
            <td>男</td>
            <td>歌手</td>
        </tr>
        <tr>
            <td>赵丽颖</td>
            <td>女</td>
            <td>演员</td>
        </tr>
        <tr>
            <td>座山雕</td>
            <td>男</td>
            <td>土匪</td>
        </tr>
        <tr>
            <td>孙悟空</td>
            <td>公</td>
            <td>和尚</td>
        </tr>
        </tbody>
    </table>
</section>

<section id="table-hover">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>职业</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>华晨宇</td>
            <td>男</td>
            <td>歌手</td>
        </tr>
        <tr>
            <td>赵丽颖</td>
            <td>女</td>
            <td>演员</td>
        </tr>
        <tr>
            <td>座山雕</td>
            <td>男</td>
            <td>土匪</td>
        </tr>
        <tr>
            <td>孙悟空</td>
            <td>公</td>
            <td>和尚</td>
        </tr>
        </tbody>
    </table>
</section>

<section id="table-condensed">
    <table class="table table-condensed">
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>职业</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>华晨宇</td>
            <td>男</td>
            <td>歌手</td>
        </tr>
        <tr>
            <td>赵丽颖</td>
            <td>女</td>
            <td>演员</td>
        </tr>
        <tr>
            <td>座山雕</td>
            <td>男</td>
            <td>土匪</td>
        </tr>
        <tr>
            <td>孙悟空</td>
            <td>公</td>
            <td>和尚</td>
        </tr>
        </tbody>
    </table>
</section>

<section id="table-responsive">
    <table class="table table-responsive">
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>职业</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>华晨宇</td>
            <td>男</td>
            <td>歌手</td>
        </tr>
        <tr>
            <td>赵丽颖</td>
            <td>女</td>
            <td>演员</td>
        </tr>
        <tr>
            <td>座山雕</td>
            <td>男</td>
            <td>土匪</td>
        </tr>
        <tr>
            <td>孙悟空</td>
            <td>公</td>
            <td>和尚</td>
        </tr>
        </tbody>
    </table>
</section>

<section id="active">
    <table class="table table-bordered">
<tr class="active">
    <td>鼠标悬停时的颜色</td>
    <td>鼠标悬停时的颜色</td>
</tr>
<tr>
    <td>鼠标悬停时的颜色</td>
    <td class="active" style="background-color: yellow">鼠标悬停时的颜色</td>
</tr>
</table>
</section>

<section id="color">
    <table class="table">
        <tr class="success">
            <td>成功绿</td>
            <td>成功绿</td>
        </tr>
        <tr>
            <td class="info">信息蓝</td>
            <td class="warning">警告黄</td>
        </tr>
        <tr class="danger">
            <td>危险红</td>
            <td>危险红</td>
        </tr>
    </table>
</section>

<section id="sr-only">
    <table class="table">
        <tr class="sr-only">
            <td>隐藏-td-1</td>
            <td>隐藏-td-2</td>
        </tr>
        <tr>
            <td class="sr-only">隐藏-td-3</td>
            <td>隐藏-td-4</td>
        </tr>
    </table>
</section>

<script src="../../jquery/jquery-3.2.1.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>